<%= turbo_frame_tag :dialog_modal do %>
  <div class="modal-content" data-controller="search-picker">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel"><%= Spree.t(:add_products) %></h5>
      <button type="button" class="btn-close" data-dismiss="modal" aria-label="<%= Spree.t(:close) %>" />
    </div>
    <div class="modal-body border-bottom pb-3">
      <%= form_with url: spree.search_admin_products_path, method: :post, data: { controller: 'auto-submit'} do |form| %>
        <%= form.hidden_field :omit_ids, value: parent.product_ids.join(',') %>
        <%= form.search_field :q, value: params[:q], class: 'form-control', data: { search_picker_target: :search, action: 'auto-submit#submit' }, autofocus: true %>
      <% end %>
    </div>
    <%= form_with url: url do |form| %>
      <div class="modal-body p-0" style="min-height: 200px">
        <div id="products_search_results" class="overflow-y-auto overflow-x-hidden" style="max-height: 300px">
          <p class="text-muted text-center pb-3 pt-5">
            <%= Spree.t(:start_typing_to_search_for_products) %>
          </p>
        </div>
      </div>
      <div class="modal-footer border-top">
        <%= turbo_save_button_tag Spree.t(:add_selected_products), class: 'btn btn-primary', disabled: true, data: { search_picker_target: :submit } %>
      </div>
    <% end %>
  </div>
<% end %>
